<template>
  <content-header :icon="billingLog" title="Paywall Management">
    <div class="header-btnGroup">
      <router-link
          v-for="item in pageList"
          :key="item.path"
          :to="item.path" :class="{ active: item.path === path }">
        {{item.name}}
      </router-link>
    </div>
  </content-header>
</template>

<script>
import billingLog from '@/assets/img/billing.png'
import contentHeader from "@/components/content-header/content-header.vue";

export default {
  name: "paywallHeader",
  components: {
    contentHeader
  },
  props: ['path'],
  data () {
    return {
      billingLog,
      pageList: [
        { name: this.$t('paywallManage.freeAccount'), path: 'FreeAccount' },
        { name: this.$t('paywallManage.tenant'), path: 'Tenant' },
        { name: this.$t('paywallManage.clientRequest'), path: 'ClientRequest' },
        { name: this.$t('paywallManage.UpgradeRequest'), path: 'UpgradeRequest' },
        { name: this.$t('paywallManage.ourPartners'), path: 'OurPartners' },
        { name: this.$t('paywallManage.ChargebeePrice'), path: 'ChargebeePrice' },
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.header-btnGroup{
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #262626;
  font-size: 14px;
  a {
    margin-left: 28px;
    text-decoration: none;
  }
  .active {
    color: #0043CE;
  }
}
</style>